<!-- 订单申诉 -->
<template>
	<view class="page">
		<view class="">
			<image class="img" src="https://images.linglinggong.net/static/shensu/tip.png" mode=""></image>
			客诉内容请及时处理，否则将影响您的接单
		</view>
		<view class="" v-if="list.length>0">
			<view class="" v-for="(item,i) in list" :key="i">
				<view class="">
					<view class=""> {{item.deductionType}} </view>
					<view :class=" [(item.status==1&&'a')||(item.status==0&&'b'||'') ]">
						{{(item.status==0&&'未申诉')||(item.status==1&&'申诉中')||(item.status==2&&'已结案')||''}}
					</view>
				</view>
				<view class=""> 平台定义为您违反规定，已扣除 <text>{{item.deductPoints||0 }}分</text> </view>
				<view class="">
				</view>
				<view class="">
					<view class="" v-show="item.status!==2"> 预计结案时长 {{item.hour||0}}小时 </view>
					<view class="">
						<view class="" @click="toSub(item.id)" v-show="item.status==0"> 申诉 </view>
						<view class="" @click="todetail(item.id)"> 查看详情 </view>
					</view>
				</view>
			</view>
		</view>
		<view class="empit" v-else>
		</view>
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'" v-show="hasFlag"></uni-load-more>
	</view>
</template>
<script>
	export default ({
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 5,
				hasFlag: true,
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				if (!this.hasFlag) return
				let res = await this.$fetch(this.$api.get_appeal_list, {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, 'GET')
				if (res.code) return
				this.list = [...this.list, ...res.rows, ]
				this.hasFlag = this.list.length < res.total
			},
			todetail(e) {
				uni.navigateTo({
					url: '/pages/tousu/employee/detail?id=' + e
				})
			},
			toSub(e) {
				uni.navigateTo({
					url: `/pages/tousu/boss/content?type=1&id=${e}`
				})
			},
		},
		onReachBottom() {
			this.pageNum += 1
			this.getList()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	})
</script>
<style lang="scss" scoped>
	.page {
		&>view:first-child {
			height: 72rpx;
			width: 100%;
			background: rgba(240, 218, 221, 1);
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #DB1211;

			.img {
				width: 40rpx;
				height: 40rpx;
				margin-left: 32rpx;
			}
		}

		&>view:nth-child(2) {
			width: 100%;

			&>view {
				width: 694rpx;
				height: 280rpx;
				margin: 20rpx auto 0;
				background: #FFF;
				border-radius: 24rpx;
				opacity: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;

				&>view {
					width: 654rpx;
					margin: 0 auto;
				}

				&>view:nth-child(1) {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;

					&>view:first-child {
						font-size: 32rpx;
						font-weight: bold;
						color: #262626;
					}

					&>view:last-child {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #7F7F7F;
					}

					.a {
						color: #FF851D !important;
					}

					.b {
						color: #DB1211 !important;
					}
				}

				&>view:nth-child(2) {
					margin-top: 12rpx;
					font-size: 28rpx;
					font-weight: 800;
					color: rgba(81, 81, 81, 1);

					&>text {
						color: #DB1211;
					}
				}

				&>view:nth-child(3) {
					border-bottom: 2rpx dashed #F1F1F5;
					margin: 28rpx auto 30rpx;
				}

				&>view:nth-child(4) {
					display: flex;
					flex: 1;
					align-items: center;
					justify-content: space-between;

					&>view:nth-child(1) {
						font-size: 24rpx;
						font-weight: bold;
						color: #7F7F7F;
					}

					&>view:nth-child(2) {
						display: flex;
						margin-left: auto;

						&>view {
							width: 160rpx;
							height: 60rpx;
							border-radius: 6rpx;
							line-height: 60rpx;
							text-align: center;
						}

						&>view:first-child {
							border: 2rpx solid #FF851D;
							font-size: 28rpx;
							font-weight: bold;
							color: #FF851D;
						}

						&>view:last-child {
							border: 2rpx solid #7F7F7F;
							font-size: 28rpx;
							font-weight: bold;
							color: #7F7F7F;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}

	.empit {
		width: 414rpx;
		height: 280rpx;
		background: url('https://images.linglinggong.net/XCX/grow/empit.png') center center/cover no-repeat;
		margin: 496rpx auto;
	}
</style>